<template>
  <div class="bg">
    <topNav txt="聊天背景" :mode="2"></topNav>

    <div class="list" >
      <span>从手机相册选择</span>
      <van-icon name="arrow" color="#333333" />
     
    <input type="file" class="input_img" accept="image/*"  @change="getImg($event)">

    </div>
    <div class="list border_bo">
      <span>拍一张</span>
      <van-icon name="arrow" color="#333333" />
      <input type="file" class="input_img" accept="image/*"  @change="getImg($event)" capture="camera">
    </div>
    <div class="disfja_c" @click="show = true">
      <span>将背景应用到所有聊天场景</span>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>
<script>
import topNav from "@/components/return";

export default {
  components: {
    topNav,
  },
  data() {
    return {
     show: false,
      actions: [{ name: '将背景应用到所有聊天场景' }],
    };
  },
  methods: {
   onSelect(){
       this.show = false
   },
   getImg(event){
     if(event == null || event == ''){
       return false
     }
   }
  },
};
</script>
<style  scoped>
.bg {
  width: 100vw;
  min-height: 100vh;
  background: #ededed;
}

.list {
  position: relative;
  background: #fff;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  /* border-bottom: 1px solid #e3e4e5; */
}
.border_bo {
  border-bottom: 10px solid #ededed;
}
.disfja_c {
  padding: 5px 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.van-action-sheet__item {
    line-height: 22px;
    color: #FF0000;
}
.input_img{
position: absolute;
opacity: 0;
width: 90%;
height: 100%;
}
</style>